<template>
	<view>
		<view v-for="(item,index) in list" :key="index" class="item">
			<title-index :title="item.question"></title-index>
			<view class="item-content">
				<view class="option-view">
					<view v-for="(option, optionIndex) in item.options" :key="option.id" 
						@click="optionClick(index, optionIndex)" class="option-item">
						<view class="option-index" :class="isOptionSelect(index, option.id) ? 'option-index-check':'option-index-uncheck'" >{{formatOptionIndex(optionIndex)}}</view>
						<text class="option-title">{{option.title}}</text>
					</view>
				</view>
				<view class="option-cover">
					<u-upload ></u-upload>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getObservationByCourse
	} from '@/api/observation.js'
	import TitleIndex from '@/components/title-index.vue'
	import { isEmpty } from '@/utils/utils.js'
	export default {
		components: {
			TitleIndex
		},
		data() {
			return {
				children: {},
				list: [],
			}
		},
		onLoad(options) {
			console.log(options);
			this.children = options;
			this.getObservation();
		},
		methods: {
			getObservation() {
				getObservationByCourse(this.children.coursePlanId, this.children.category).then(res => {
					console.log(res);
					this.list = res.data;
				})
			},
			
			optionClick(index, optionIndex) {
				let item = this.list[index];
				let option = item.options[optionIndex];
				
				let optionList = [];
				optionList.push(option.id);
				item.optionList = optionList;
				console.log(item);
			},
			
			isOptionSelect(index, optionId) {
				let item = this.list[index];
				if (isEmpty(item.optionList)) {
					return false;
				}
				if (item.optionList.indexOf(optionId) !== -1) {
					return true;
				}
				return false;
			},

			formatOptionIndex(index) {
				let day = '';
				switch (index) {
					case 0:
						day = "A";
						break;
					case 1:
						day = "B";
						break;
					case 2:
						day = "C";
						break;
					case 3:
						day = "D";
						break;
					case 4:
						day = "E";
						break;
					case 5:
						day = "F";
						break;
					case 6:
						day = "G";
				}
				return day;
			}
		}
	}
</script>

<style lang="scss">
	
	.item{
		margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		
		.item-title{
			
		}
		
		.item-content {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
		
			.option-view {
				flex-grow: 1;
				margin-left: 20rpx;
		
				.option-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 20rpx;
		
					.option-index {
						width: 70rpx;
						height: 70rpx;
						border-radius: 35rpx;
						color: #FFFFFF;
						background-color: #d8d8dc;
						font-size: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.option-index-check {
						background-color: $app-main-color;
					}
					
					.option-index-uncheck{
						background-color: #d8d8dc;
					}
		
					.option-title {
						flex-grow: 1;
						width: 10rpx;
						margin-left: 10rpx;
						font-size: 26rpx;
					}
				}
			}
		
			.option-cover {}
		}
	}
	
</style>
